<template>
  <div class='container'>
     <el-dialog
     width="70%"
     @open = "openDailog"
     @close="closeDailog"
     :close-on-click-modal = false
     title="题目预览" :visible.sync="dialogTableVisible">
     <!-- 题目详情 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <span>【题型】:</span>
          <span v-if="quesData.questionType === '1'">单选</span>
          <span v-if="quesData.questionType === '2'">多选</span>
          <span v-if="quesData.questionType === '3'">简答</span>
        </el-col>
        <el-col :span="6">
          <span>【编号】:{{quesData.id}}</span>
        </el-col>
        <el-col :span="6">
          <span>【难度】:</span>
          <span v-if="quesData.difficulty === '1'">简单</span>
          <span v-if="quesData.difficulty === '2'">一般</span>
          <span v-if="quesData.difficulty === '3'">困难</span>
        </el-col>
        <el-col :span="6">
          <span>【标签】:{{quesData.tags}}</span>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <span>【学科】:{{quesData.subjectName}}</span>
        </el-col>
        <el-col :span="6">
          <span>【目录】:{{quesData.directoryName}}</span>
        </el-col>
        <el-col :span="6">
          <span>【方向】:{{quesData.direction}}</span>
        </el-col>
      </el-row>
      <!-- 题干 -->
        <div class="questionStem">【题干】:</div>
        <div class="question" v-html="quesData.question"></div>
        <!-- 不是简答 -->
        <div v-if="quesData.questionType !== '3'">
          <!-- 提示信息 -->
         <p v-if="quesData.questionType === '1'">
           单选题选项: (以下选中的选项是正确答案)
         </p>
         <p v-if="quesData.questionType === '2'">
           多选题选项: (以下选中的选项是正确答案)
         </p>
         <!-- 单选框组显示 -->
         <div v-if="quesData.questionType === '1'">
           <el-radio-group :value="1">
            <div
              v-for="item in quesData.options" :key="item.id"
              style="margin-top: 20px">
              <el-radio :label="item.isRight">{{item.code}}
                <span style="marginLeft:'8px'">{{item.title}}</span>
              </el-radio>
            </div>
          </el-radio-group>
         </div>
         <!-- 复选框 -->
         <div v-if="quesData.questionType === '2'">
            <el-checkbox-group :value="checkList">
              <div
                v-for="item in quesData.options" :key="item.id"
                style="margin-top: 20px"
              >
                <el-checkbox :label="item.isRight" name="type">
                  {{item.code}}
                {{item.title}}
                </el-checkbox>
              </div>
            </el-checkbox-group>
          </div>
        </div>
      <!-- 视频区域 -->
      <div class="videoArea">
        【视频答案】:
        <el-button @click="playVideo" type="danger">视频答案预览</el-button>
        <div v-if="isPlay">
        <video width="320" height="240" controls autoplay>
           <source :src="quesData.videoURL" type="video/ogg">
           <source :src="quesData.videoURL" type="video/mp4">
           <source :src="quesData.videoURL" type="video/webm">
        </video>
        </div>
      </div>
      <!-- 答案解析 -->
      <div class="analysis">
        【答案解析】:<span v-html="quesData.answer"></span>
      </div>
      <div class="remarks">
        【题目备注】:<span>{{quesData.remarks}}</span>
      </div>
      <div class="close">
        <el-button @click="dialogTableVisible = false" type="primary">退出</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { detail } from '@/api/hmmm/questions.js'
export default {
  name: 'questuonPer',
  props: {
    value: {
      type: Boolean
    },
    id: {
      type: Number
    }
  },
  data () {
    return {
      // 返回的数据
      quesData: {},
      // 弹出层
      dialogTableVisible: this.value,
      // 控制视频标签的创建
      isPlay: false,
      // 复选按钮数据项
      checkList: []
    }
  },
  created () {
    // this.getQuestionData()
  },
  methods: {
    // 获取当前题目数据------------------------------
    async getQuestionData () {
      const res = await detail({ id: this.id })
      console.log(res)
      this.quesData = res.data
      // 主要作用时在获取试题类型为多选时将isright 的值
      // 用来给多选按钮单项赋值
      if (this.quesData.questionType === '2') {
        this.checkList = this.quesData.options.map((item) => {
          if (item.isRight === 1) {
            return item.isRight
          }
        })
      }
    },
    playVideo () {
      this.isPlay = true
    },
    // 关闭弹层时触发的事件---------------------------------------
    closeDailog () {
      this.$emit('input', false)
    },
    openDailog () {
      this.getQuestionData()
    }
  },
  watch: {
    value: function (newVal) {
      this.dialogTableVisible = newVal
    }
  }

}
</script>

<style scoped lang='less'>
.el-row{
  margin-top: 15px;
}
.questionStem{
  margin: 15px 0 0;
  padding-top: 15px;
  border-top: 3px solid #d3d3d3;
}
.question{
  color: #0a0aff;
}
.videoArea{
  margin-top: 15px;
  padding: 10px 0;
  border-top: 3px solid #d3d3d3;
  border-bottom: 3px solid #d3d3d3;
}
.analysis{
  padding: 15px 0;
  border-bottom: 3px solid #d3d3d3;
}
.remarks{
   padding: 15px 0;
}
.close{
  text-align: center;
}
</style>
